<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="java.util.List" %>
<%@ page import="java.util.ArrayList" %>
<%@ page import="javax.servlet.http.HttpSession" %>
<%@ page import="java.util.stream.Collectors" %>
<%@ page import="cn.edu.lingnan.pojo.ScoreDTO " %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title> 学生课程</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <script type="text/javascript">
        function filterCourses() {
            var selectedGrade = document.getElementById("gradeSelect").value;
            var allRows = document.getElementsByClassName("courseRow");
            for (var i = 0; i < allRows.length; i++) {
                var grade = allRows[i].getAttribute("data-grade");
                if (grade === selectedGrade) {
                    allRows[i].style.display = "";
                } else {
                    allRows[i].style.display = "none";
                }
            }
        }
    </script>
</head>
<body onload="filterCourses()" class="bg-light">
<div class="container mt-5">
    <h1 class="mb-4" style="text-align: center;">学生课程</h1>
    <div class="form-group" style="display:flex">
        <label for="gradeSelect" style="line-height: 34px;">选择年级:</label>
        <select id="gradeSelect" class="form-control w-25" onchange="filterCourses()">
            <option value="1">大一</option>
            <option value="2">大二</option>
            <option value="3">大三</option>
            <option value="4">大四</option>
        </select>
    </div>
    <table class="table table-bordered table-hover" style="text-align: center;">
        <thead class="thead-dark">
        <tr>
            <th>课程编号</th>
            <th>课程名称</th>
            <th>讲师名称</th>
            <th>时间</th>
            <th>学分</th>
            <th>年级</th>
            <th>状态</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <%
            List<ScoreDTO> courses = (List<ScoreDTO>) session.getAttribute("courses");
            if (courses != null) {
                for (ScoreDTO course : courses) {
                    String grade = "";
                    switch(course.getGrade()) {
                        case 1: grade = "大一"; break;
                        case 2: grade = "大二"; break;
                        case 3: grade = "大三"; break;
                        case 4: grade = "大四"; break;
                    }
        %>
        <tr class="courseRow" data-grade="<%= course.getGrade() %>">
            <td><%= course.getCid() %></td>
            <td><%= course.getCname() %></td>
            <td><%= course.getTname() %></td>
            <td><%= course.getCtime() %></td>
            <td><%= course.getCredit() %></td>
            <td><%= grade %></td>

            <!-- 第一个新增加的 td，根据 grade 显示 "在上中" 或 "已完结"，并添加指示灯 -->
            <td>
                <% if (course.getGrade() == 3) { %>
                <span style="color: green;">●</span> 在上中
                <% } else { %>
                <span style="color: gray;">●</span> 已完结
                <% } %>
            </td>

            <!-- 第二个新增加的 td，根据 grade 显示按钮或文字，并将 "无法退课" 显示为灰色 -->
            <td>
                <% if (course.getGrade() == 3) { %>
                <button type="button" class="btn btn-danger">退课</button>
                <% } else { %>
                <span style="color: gray;">无法退课</span>
                <% } %>
            </td>
        </tr>


        <%
                }
            }
        %>
        </tbody>
    </table>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
